<template>
    <div class="system-menu-container">
        <el-dialog v-model="isShowDialog" width="769px" center>
            <template #title>
                <div style="font-size: large" v-drag="['.system-menu-container .el-dialog', '.system-menu-container .el-dialog__header']">{{title}}</div>
            </template>
            <el-form
                    :model="ruleForm"
                    :rules="ruleRules"
                    ref="ruleFormRef"
                    label-width="80px"
            >
                <el-row :gutter="35">
                    <el-col :span="24" >
                        <el-form-item label="上级菜单" prop="parentId">
                            <el-cascader
                                    v-model="ruleForm.parentId"
                                    :options="menuOptions"
                                    class="w100"
                                    :props="{
                  label: 'menuName',
                  value: 'menuId',
                  checkStrictly: true,
                  emitPath: false,
                }"
                                    clearable
                                    filterable
                                    placeholder="选择上级菜单"
                                    :show-all-levels="false"
                            ></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                        <el-form-item label="菜单类型" prop="menuType">
                            <el-radio-group v-model="ruleForm.menuType">
                                <el-radio
                                        v-for="dict in menuTypeOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
                        <el-form-item label="菜单名称" prop="menuName">
                            <el-input
                                    v-model="ruleForm.menuName"
                                    placeholder="请输入菜单名称"
                                    clearable
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
                        <el-form-item label="菜单排序" prop="sort">
                            <el-input-number
                                    v-model="ruleForm.sort"
                                    placeholder="菜单排序"
                                    clearable
                            ></el-input-number>
                        </el-form-item>
                    </el-col>

                    <el-col
                            :xs="24"
                            :sm="12"
                            :md="12"
                            :lg="12"
                            :xl="12"
                            
                            v-if="ruleForm.menuType != 'F'"
                    >
                        <el-form-item label="菜单图标" prop="icon">
                            <IconSelector
                                    placeholder="请输入菜单图标"
                                    v-model="ruleForm.icon"
                                    type="all"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
                        <el-row :gutter="8">
                            <el-col :span="22">
                                <el-form-item label="权限标识" prop="permission">
                                    <el-input
                                            v-model="ruleForm.permission"
                                            placeholder="路由权限标识"
                                            clearable
                                            :disabled="ruleForm.menuType == 'M'? true: false"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-tooltip content="路由权限标识（多个请用逗号隔开）" placement="top">
                                    <i class="fa fa-exclamation-circle ml10 mt10"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col
                            :xs="24"
                            :sm="12"
                            :md="12"
                            :lg="12"
                            :xl="12"
                            
                            v-if="ruleForm.menuType != 'F'"
                    >
                        <el-row :gutter="8">
                            <el-col :span="22">
                                <el-form-item label="组件地址">
                                    <el-input
                                            v-model="ruleForm.component"
                                            placeholder="组件地址"
                                            clearable
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-tooltip content="菜单对应的具体vue页面文件路径views的下级路径/system/user/index,外链请填写/layout/routerView/link，内链请填写/layout/routerView/iframes" placement="top">
                                    <i class="fa fa-exclamation-circle ml10 mt10"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col
                            :xs="24"
                            :sm="12"
                            :md="12"
                            :lg="12"
                            :xl="12"
                            v-if="ruleForm.menuType != 'F'"
                    >
                        <el-row :gutter="8">
                            <el-col :span="22">
                                <el-form-item label="路由地址">
                                    <el-input
                                            v-model="ruleForm.path"
                                            placeholder="请输入路由地址"
                                            clearable
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-tooltip content="要和页面name保持一致:例如 /system/role" placement="top">
                                    <i class="fa fa-exclamation-circle ml10 mt10"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" >
                        <el-form-item label="菜单状态" prop="status">
                            <el-radio-group v-model="ruleForm.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="ruleForm.menuType != 'F'">
                        <el-form-item label="是否隐藏">
                            <el-radio-group v-model="ruleForm.isHide">
                                <el-radio
                                        v-for="dict in isHideOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="ruleForm.menuType != 'F'">
                        <el-form-item label="是否缓存">
                            <el-radio-group v-model="ruleForm.isKeepAlive">
                                <el-radio
                                        v-for="dict in yesOrNoOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="ruleForm.menuType != 'F'">
                        <el-row :gutter="8">
                            <el-col :span="22">
                                <el-form-item label="是否固定">
                                    <el-radio-group v-model="ruleForm.isAffix">
                                        <el-radio
                                                v-for="dict in yesOrNoOptions"
                                                :key="dict.dictValue"
                                                :label="dict.dictValue"
                                        >{{ dict.dictLabel }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="2">
                                <el-tooltip content="是否要固定到tag头部" placement="top" v-if="ruleForm.menuType != 'F'">
                                    <i class="fa fa-exclamation-circle ml10 mt10"></i>
                                </el-tooltip>
                            </el-col>
                        </el-row>

                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="ruleForm.menuType != 'F'">
                        <el-form-item label="是否内嵌">
                            <el-radio-group v-model="ruleForm.isIframe">
                                <el-radio
                                        v-for="dict in yesOrNoOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                >{{ dict.dictLabel }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"  v-if="ruleForm.menuType != 'F'">
                        <el-form-item label="链接地址">
                            <el-input
                                    v-model="ruleForm.isLink"
                                    placeholder="外链/内嵌时链接地址（http:xxx.com）"
                                    clearable
                            >
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" >
                        <el-form-item label="备注">
                            <el-input
                                    v-model="ruleForm.remark"
                                    placeholder="请输入备注内容"
                                    clearable
                                    type="textarea"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel">取 消</el-button>
          <el-button type="primary" @click="onSubmit" :loading="loading">编 辑</el-button>
        </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
    import {reactive, toRefs, ref, unref, getCurrentInstance} from "vue";
    import IconSelector from "/@/components/iconSelector/index.vue";
    import {treeselect, updateMenu, addMenu} from "/@/api/system/menu";
    import {ElMessage} from "element-plus";
    import {Session} from "/@/utils/storage";

    //import { initBackEndControlRoutes } from "/@/router/index";
    import {useStore} from "/@/store";
    export default {
        name: "editMenu",
        components: {IconSelector},
        props: {
            // 弹窗标题
            title: {
                type: String,
                default: () => "",
            },
        },
        setup() {
            const store = useStore();
            const {proxy} = getCurrentInstance() as any;
            const ruleFormRef = ref<HTMLElement | null>(null);
            const state = reactive({
                // 是否显示弹出层
                isShowDialog: false,
                loading: false,
                /**
                 * 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式（请注意参数类型！）
                 * 受到 `element plus` 类型 `string/number/object` 影响，不可使用 `:value="true"`
                 * 的写法，所以传值到后台时，需要转换成布尔值，否则页面可能出现玄学。
                 * 路由权限标识为数组格式，基本都需要自行转换类型
                 */
                ruleForm: {
                    menuId: 0, // 菜单ID
                    menuName: "", // 菜单名称
                    menuType: "",
                    parentId: 0, // 父菜单ID
                    component: "", // 组件地址
                    path: "",
                    sort: 1, // 菜单排序
                    status: "", //菜单状态
                    title: "", // 菜单名称
                    icon: "", // 菜单图标
                    isHide: "", // 是否隐藏
                    isKeepAlive: "", // 是否缓存
                    isAffix: "", // 是否固定
                    isLink: "", // 是否外链，开启外链条件，`1、isLink:true 2、链接地址不为空`
                    isIframe: "", // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
                    permission: "", // 路由权限标识（多个请用逗号隔开），最后转成数组格式
                    remark: "", // 备注
                },
                // 显示状态数据字典
                isHideOptions: [],
                // 菜单状态数据字典
                statusOptions: [],
                // 菜单类型数据字典
                menuTypeOptions: [],
                // 数字是否数据字典
                yesOrNoOptions: [],
                // 菜单树选项
                menuOptions: [],
                // 表单校验
                ruleRules: {
                    menuName: [
                        {required: true, message: "菜单名称不能为空", trigger: "blur"},
                    ],
                    parentId: [
                        {required: true, message: "父菜单不能为空", trigger: "blur"},
                    ],
                    menuType: [
                        {required: true, message: "菜单类型不能为空", trigger: "blur"},
                    ],
                    status: [
                        {required: true, message: "菜单状态不能为空", trigger: "blur"},
                    ],
                    sort: [
                        {required: true, message: "菜单顺序不能为空", trigger: "blur"},
                    ],
                },
            });
            // 打开弹窗
            const openDialog = (row: any) => {
                console.log(row)
                if (row.menuId && row.menuId != undefined && row.menuId != 0) {
                    state.ruleForm = row;
                } else {
                    initForm();
                    state.ruleForm.parentId = row.parentId;
                }

                state.isShowDialog = true;
                state.loading = false;
                // 查询显示状态数据字典
                proxy.getDicts("sys_show_hide").then((response: any) => {
                    state.isHideOptions = response.data;
                });
                // 查询菜单状态数据字典
                proxy.getDicts("sys_normal_disable").then((response: any) => {
                    state.statusOptions = response.data;
                });
                // 查询菜单类型数据字典
                proxy.getDicts("sys_menu_type").then((response: any) => {
                    state.menuTypeOptions = response.data;
                });
                // 查询数字是否数据字典
                proxy.getDicts("sys_num_yes_no").then((response: any) => {
                    state.yesOrNoOptions = response.data;
                });
                // 查询菜单下拉树结构
                treeselect().then((response: any) => {
                    state.menuOptions = [];
                    const menu = {menuId: 0, menuName: "主类目", children: []};
                    menu.children = response.data;
                    state.menuOptions.push(menu);
                    // console.log("查询菜单下拉树结构2", proxy.handleTree(v_data, "id"));
                    // state.menuOptions.push(menu);
                });
            };
            // 关闭弹窗
            const closeDialog = (row?: object) => {
                initForm()
                proxy.mittBus.emit("onEditMenuModule", row)
                state.isShowDialog = false;
            };
            // 取消
            const onCancel = () => {
                closeDialog();
                initForm();
            };
            // 保存
            const onSubmit = () => {
                const formWrap = unref(ruleFormRef) as any;
                if (!formWrap) return;
                formWrap.validate((valid: boolean) => {
                    if (valid) {
                        if (state.ruleForm.component == "") {
                            if (state.ruleForm.menuType == "F"){
                                state.ruleForm.component = ""
                            }else {
                                state.ruleForm.component = "Layout"
                            }
                        }
                        state.loading = true;
                        if (state.ruleForm.menuId != undefined && state.ruleForm.menuId != 0) {
                            updateMenu(state.ruleForm).then((response) => {
                                ElMessage.success("修改成功");
                                state.loading = false
                                closeDialog(); // 关闭弹窗
                                //resetSession(response)
                            });
                        } else {
                            addMenu(state.ruleForm).then((response) => {
                                ElMessage.success("新增成功");
                                state.loading = false
                                closeDialog(); // 关闭弹窗
                                //resetSession(response)
                            });
                        }
                    }
                });
            };
            // 重置session
            const resetSession = (res:any) => {
                let permissions = res.data.permissions
                permissions.push('base')
                let menus = res.data.menus
                Session.set('menus', menus);
                let userInfos: any = Session.get("userInfo")
                userInfos.authBtnList = permissions
                userInfos.authPageList = permissions
                store.dispatch('userInfos/setUserInfos', userInfos);
                Session.set('userInfo', userInfos);
                //window.location.reload()   //页面刷新有
                //initBackEndControlRoutes();
            }
            // 表单初始化，方法：`resetFields()` 无法使用
            const initForm = () => {
                state.ruleForm.menuId = 0; // 菜单ID
                state.ruleForm.menuName = ""; // 菜单名称
                state.ruleForm.menuType = "";
                state.ruleForm.parentId = 0; // 父菜单ID
                state.ruleForm.component = ""; // 组件地址
                state.ruleForm.path = ""; // 路由地址
                state.ruleForm.sort = 1; // 菜单排序
                state.ruleForm.status = ""; //菜单状态
                state.ruleForm.title = ""; // 菜单名称
                state.ruleForm.icon = ""; // 菜单图标
                state.ruleForm.isHide = ""; // 是否隐藏
                state.ruleForm.isKeepAlive = ""; // 是否缓存
                state.ruleForm.isAffix = ""; // 是否固定
                state.ruleForm.isLink = ""; // 是否外链，开启外链条件，`1、isLink:true 2、链接地址不为空`
                state.ruleForm.isIframe = ""; // 是否内嵌，开启条件，`1、isFrame:true 2、链接地址不为空`
                state.ruleForm.permission = ""; // 路由权限标识（多个请用逗号隔开），最后转成数组格式
                state.ruleForm.remark = ""; // 备注
            };

            return {
                ruleFormRef,
                openDialog,
                closeDialog,
                onCancel,
                onSubmit,
                ...toRefs(state),
            };
        },
    };
</script>
